<template>
  <view class="container">
    <uni-drawer ref="showRight" mode="right"  width="330" mask="true ">
      <view class="form-content">
        <uni-forms ref="form" :modelValue="formData" :rules="rules">
          <uni-forms-item label="审批状态"  name="approvalStatus">
            <uni-data-select
              v-model="formData.approvalStatus"
              :localdata="range1"
              :disabled="isVisibleone"
              @change="changeapprovalStatus"
            />
          </uni-forms-item>
          <uni-forms-item label="销假状态"  name="revokeStatus">
            <uni-data-select
              v-model="formData.revokeStatus"
              :localdata="range2"
              :disabled="isVisibletwo"
              @change="changerevokeStatus"
            />
          </uni-forms-item>
          <uni-forms-item label="延假状态"  name="extensionStatus">
            <uni-data-select
              v-model="formData.extensionStatus"
              :localdata="range3"
              :disabled="isVisiblethree"
              @change="changextensionStatus"
            />
          </uni-forms-item>
          <uni-forms-item label="审批理由"  name="approvalInstructions">
            <uni-easyinput 
              v-model="formData.approvalInstructions" 
              placeholder="选填" 
              type="textarea" 
              maxlength="500"
              inputBorder="true"/>
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="submit-btn" @tap="SubmitForm">
        提交
      </view>
    </uni-drawer>
  </view>
</template>

<script>
  export default {
    name:"pending-drawer",
    data() {
      return {
        isVisibleone: false,
        isVisibletwo: false,
        isVisiblethree: false,
        // 表单内容
        formData: {
          id: null,
          approvalStatus: null,
          revokeStatus: null,
          extensionStatus: null,
          approvalInstructions: null
        },
        range1: [
          {value:0,text: '未审核',disable: false },
          {value:1,text: '审核中',disable: false },
          {value:2,text: '审核通过',disable: false},
          {value:3,text: '驳回审核',disable: false }
        ],
        range2: [
          {value:0,text: '未销假',disable: false },
          {value:1,text: '待销假',disable: false },
          {value:2,text: '销假通过',disable: false },
          {value:3,text: '销假超时',disable: false },
        ],
        range3: [
          {value:0,text: '未延期',disable: false},
          {value:1,text: '申请延期',disable: false},
          {value:2,text: '同意延期',disable: false},
          {value:3,text: '不同意延期',disable: false}
        ],
        rules: {
          approvalStatus: {
            rules: [{
              required: true,
              errorMessage: '请选择审批类型'
            }]
          }
        },
      };
    },
    methods: {
      // 处理审批状态权限
      handleApprovalStatusPermission(status) {
        this.isVisibleone = false;
        this.resetSelectDisabled(this.range1);
        
        switch(status) {
          case 1: // 审核中
            this.range1[0].disable = true;
            break;
          case 2: // 审核通过
            this.range1[0].disable = true;
            this.range1[1].disable = true;
            break;
          case 3: // 驳回审核
            this.isVisibleone = true;
            break;
          case 4: // 其他情况
            this.isVisibleone = true;
            this.range3[0].disable = true;
            this.range3[1].disable = true;
            break;
        }
      },
      
      // 处理销假状态权限
      handleRevokeStatusPermission(status) {
        this.isVisibletwo = false;
        this.resetSelectDisabled(this.range2);
        
        switch(status) {
          case 1: // 审核中
          case 2: // 审核通过
            this.isVisibletwo = true;
            break;
          case 3: // 驳回审核
            this.range2[0].disable = true;
            this.range2[1].disable = true;
            break;
          case 4: // 其他情况
            this.isVisibletwo = true;
            break;
        }
      },
      
      // 处理延期状态权限
      handleExtensionStatusPermission(status) {
        this.isVisiblethree = false;
        this.resetSelectDisabled(this.range3);
        
        switch(status) {
          case 1: // 审核中
          case 2: // 审核通过
          case 3: // 驳回审核
            this.range3[0].disable = true;
            this.range3[1].disable = true;
            this.isVisiblethree = true;
            break;
          case 4: // 其他情况
            this.range3[0].disable = true;
            this.range3[1].disable = true;
            break;
        }
      },
      
      // 重置选择框禁用状态
      resetSelectDisabled(range) {
        range.forEach(item => {
          item.disable = false;
        });
      },
      
      // 统一处理状态变更
      handleStatusChange(field, value) {
        this.formData[field] = value;
      },
      
      // 审批状态变更
      changeapprovalStatus(e) {
        this.handleStatusChange('approvalStatus', e);
      },
      
      // 销假状态变更
      changerevokeStatus(e) {
        this.handleStatusChange('revokeStatus', e);
      },
      
      // 延期状态变更
      changextensionStatus(e) {
        this.handleStatusChange('extensionStatus', e);
      },
      
      // 提交表单
      async SubmitForm() {
        try {
          await this.$refs.form.validate();
          
          // 发送请求前显示加载提示
          uni.showLoading({
            title: '提交中...'
          });
          
          await uni.$http.patch('/approval', this.formData);
          
          uni.hideLoading();
          uni.$showMsg('审批成功');
          
          setTimeout(() => {
            this.closeDrawer();
            this.$emit('submit');
          }, 1000);
        } catch (error) {
          uni.hideLoading();
          uni.$showMsg('表单验证失败或提交出错');
          console.error('表单提交错误:', error);
        }
      },
      
      // 显示抽屉
      showDrawer(e) {
        this.$refs.showRight.open();
        
        // 处理各种状态权限
        this.handleApprovalStatusPermission(e.active);
        this.handleRevokeStatusPermission(e.active);
        this.handleExtensionStatusPermission(e.active);
        
        // 回显数据
        this.showFormData(e);
      },
      
      // 关闭抽屉
      closeDrawer() {
        this.$refs.showRight.close();
        
        // 重置表单数据
        this.resetFormData();
      },
      
      // 重置表单数据
      resetFormData() {
        this.formData = {
          id: null,
          approvalStatus: null,
          revokeStatus: null,
          extensionStatus: null,
          approvalInstructions: null
        };
      },
      
      // 显示表单数据
      showFormData(data) {
        Object.keys(this.formData).forEach(key => {
          if (data[key] !== undefined && data[key] !== null) {
            this.formData[key] = data[key];
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #f5f5f5;
    
    .form-content {
      margin-top: 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
      padding: 20rpx;
      
      .counter {
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
        font-size: 24rpx;
        color: #999;
      }
    }
    .submit-btn {
      position: fixed;
      bottom: 40rpx;
      left: 20rpx;
      right: 20rpx;
      height: 80rpx;
      background-color: #007AFF;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 40rpx;
      font-size: 32rpx;
    }
  }
</style>